import React, { Component } from 'react';
import "../../styles/Index/Home.scss"
import nav from "../../img/nav.gif"

import { index_banner, index_nav, index_goodlist } from '../../api/index'

import MySwiper from '../../components/MySwiper';
import MyEntry from '../../components/MyEntry';
import MySeckill from '../../components/MySeckill';


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bannerlist: [],
            navlist: [],
            secklist: [],
            num:0 ,
        }
    }
    gosearch(){
        this.props.history.push('/search')
    }
    async componentDidMount() {
        // 轮播图请求
        index_banner().then(res => {
            // console.log(res);
            this.setState({
                bannerlist: res.data.list
            })
        })

        //商品导航请求
        let res = await index_nav()
        // console.log(res);
        this.setState({
            navlist: res.data.list
        })

        // 推荐列表,值得买
        let data = await index_goodlist()
        // console.log(res);
        this.setState({
            secklist: data.data.list,
        })
    }
    componentDidUpdate(){
        window.onscroll = ()=>{
            // 变量scrollTop是滚动条滚共时,距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
            
            // 变量 windowHeight 是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

            // 变量scrollHeight 是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

            // 滚动条到底部的条件
            if (scrollTop + windowHeight + 1>= scrollHeight) {
                this.setState({num: this.state.num + 1},()=>{
                    index_goodlist({page: this.state.num, count:9}).then(res=>{
                        this.setState({secklist: [...this.state.secklist, ...res.data.list]})
                    })
                })
            }
        }
    }
    render() {
        return (
            <div className='home'>
                <div className='my-header'>
                    <input type="text" placeholder='搜索内容' onClick={()=>{this.gosearch()}} />
                    <div className="kefu">
                        <p>客服</p>
                    </div>
                </div>
                <div className="main">
                    {/* 轮播图 */}
                    <MySwiper swiperlist={this.state.bannerlist} />

                    {/* 商品导航 */}
                    <MyEntry navslist={this.state.navlist} />

                    {/* 推荐列表 */}
                    <img src={nav} alt="" />
                    {/* <div className="recom">
                        <span>今日值得买</span>
                        <span>MORE</span>
                    </div> */}
                    <MySeckill seckilllist={this.state.secklist} />
                </div>
            </div>
        );
    }
}

export default Home;